<template>
    <label @click.stop>
        <el-input ref="input" class="sea-table-input-cell"
                  v-model="valueModel"
                  :type="type" :clearable="props.clearable"
                  :placeholder="props.placeholder" @change="onchange">
            <template #suffix>
                <i class="fa fa-pencil-square-o"></i>
            </template>
        </el-input>
        <span v-if="validation" v-show="validation.valid === false" class="sea-form-error">{{
                validation.message
            }}</span>
    </label>
</template>

<script setup lang="ts">
import {useValueModel, useValidator, UseValueModel, ModifiedMethod} from "@/widget/data-table/use-value-model";

/**
 * 行内输入框
 */
interface Props extends /* @vue-ignore */  UseValueModel {
    // 字段名
    property: string
    // 行级数据
    row: Record<string, any>
    // 默认值（单向输入，需要通过 change 事件侦听变化）
    value?: string | boolean | number
    // 数据变化事件
    change?: ModifiedMethod
    // 文字提示
    placeholder?: string
    // 是否可清除
    clearable?: boolean

    // 输入框类型
    type?: string
}

// 设置默认值
const props = withDefaults(defineProps<Props>(), {
    type: 'text',
    value: '',
    placeholder: '请选择'
})

const {valueModel, onchange} = useValueModel(props);

const {validation} = useValidator(props);
</script>